<template>
  <el-container style="width: 100%;">
    <el-header>
      <p>收费道路列表</p>
    </el-header>
    <el-main>
      <el-row class="btn-group">
        <el-button class="btn" @click.native="openAddDialog"><span>添加</span>
          <i class="el-icon-plus"></i>
        </el-button>
        <!--<el-button class="btn" @click.native="editRoad"><span>编辑</span>-->
          <!--<i class="el-icon-edit"></i>-->
        <!--</el-button>-->
        <el-button class="btn" @click.native="delRoad"><span>删除</span>
          <i class="el-icon-delete"></i>
        </el-button>
        <el-button class="btn"><span>导出</span>
          <i class="el-icon-download"></i>
        </el-button>
      </el-row>
      <el-table
        :data="tollRoadList.list"
        ref="multipleTable"
        :row-key="getRowKeys"
        style="width:100%" tooltip-effect="dark"
        stripe v-loading="tollRoadLoading"
        element-loading-text="给我一点时间"
        @selection-change="handleSelectionChange">
        <el-table-column :reserve-selection="true" fixed align="center" type="selection" width="50"></el-table-column>
        <el-table-column fixed sortable align="center" prop="roadname" label="道路名称" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="ssdwname" label="所属辖区" width="160"></el-table-column>
        <el-table-column sortable align="center" prop="roadkind_name" label="是否师范路" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="roadtype_name" label="道路类型" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="parknum" label="停车场数" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="placenum" label="泊位数" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="tcwz_name" label="停车位置" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="tcsd_name" label="停车时段" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="qzddname" label="起止地点" width="250"></el-table-column>
        <!--<el-table-column sortable align="center" prop="remark" label="备注" width="250"></el-table-column>-->
        <el-table-column fixed="right" align="center" width="100" label="操作">
          <template slot-scope="scope">
            <el-dropdown trigger="click" @command="handleCommand">
              <el-button class="btn-drop-down" @click="changeRow(scope.row)">
                <i class="el-icon-arrow-down"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="edit">编辑</el-dropdown-item>
                <el-dropdown-item command="del">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        background
        :total="dataCount"
        :page-sizes="[10,20,30,50]"
        :page-size="dataPageSize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 10px;"
      ></el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
  /* eslint-disable */
  import {delBaseRoad} from '../../../api/parkingResource/tollRoad'
  import ElMain from "element-ui/packages/main/src/main";
  import ElFooter from "element-ui/packages/footer/src/main";

  export default {
    components: {
      ElFooter,
      ElMain
    },
    name: 'tollRoadTable',
    props: ['tollRoadList', 'tollRoadLoading'],
    data() {
      return {
        changeVal: '',
        loading: true,
        currentPage: 1,
        dataCount: 0,
        dataPageSize: 10,
        multipleTable: [],
        getRowKeys(row) {
          return row.roadno
        }
      }
    },
    watch: {
      tollRoadLoading(val) {
        this.loading = val
      },
      tollRoadList(val) {
        this.dataCount = val.count
        this.dataPageSize = val.pageSize
        this.currentPage = val.num
      }
    },
    methods: {
      openAddDialog() {
        this.$emit('tollRoadAddVisible', true)
      },
      editRoad() {
        if (this.multipleTable.length !== 1) {
          this.$message({
            message: '请选择一条记录',
            type: 'warning'
          })
          return
        }
        this.$emit('editBaseRoad', [this.multipleTable[0], true])
      },
      delRoad() {
        if (this.multipleTable.length < 1) {
          this.$message({
            message: '请选择至少一条记录',
            type: 'warning'
          })
          return
        }
        this.$confirm('此操作将永久删除选中的记录,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delBaseRoad(this.multipleTable).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.$emit('reSelectRoad', 1)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleCurrentChange(val) {
        this.$emit('pageNum', val)
      },
      handleSizeChange(val) {
        this.$emit('pageSize', val)
      },
      handleSelectionChange(val) {
        this.multipleTable = val
      },
      handleCommand(val) {
        const delArray = [];
        if (val === 'edit') {
          this.$emit('editBoolean', [this.changeVal, true])
        }
        if (val === 'del') {
          this.$confirm('此操作将永久删除选中的记录,是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delArray.push(this.changeVal)
            delBaseRoad(delArray).then(res => {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.$emit('reSelectRoad', 1)
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        }
      },
      changeRow(val) {
        this.changeVal = Object.assign({}, val) // copy obj
      }
    }
  }
</script>

<style scoped>

  .btn-group > .el-button span {
    display: none;
  }

  .btn-group > .el-button:hover {
    background-color: #409EFF;
  }

  .btn-group > .el-button:hover span {
    display: block;
  }

  .btn-group > .el-button:hover i {
    display: none;
  }
</style>
